<template>
  <div>
    <van-panel :title="report.reportName">
      <van-cell-group>
        <van-cell title="考核模板"
                  :value="report.templateName" />
        <van-cell title="考核职工"
                  :value="report.userName" />
        <van-cell title="总分数"
                  :value="report.totalVal" />
      </van-cell-group>
      <div slot="footer"
           align='right'>
        <van-button size="small">按钮</van-button>
        <van-button size="small"
                    type="danger">按钮</van-button>
      </div>
    </van-panel>
    <van-row type="flex"
             justify="center">
      <van-col span="11"
               class="col">考核模板</van-col>
      <van-col span="11"
               class="col">考核职工</van-col>
    </van-row>
    <van-row type="flex"
             justify="center">
      <van-col span="11"
               class="col">{{report.templateName}}</van-col>
      <van-col span="11"
               class="col">{{report.userName}}</van-col>
    </van-row>
    <van-row type="flex"
             justify="center">
      <van-col span="11"
               class="col">{{report.templateName}}</van-col>
      <van-col span="11"
               class="col">{{report.userName}}</van-col>
    </van-row>
  </div>
</template>
<script>
import { Panel, Button, Cell, CellGroup, Row, Col } from 'vant'
import { ReportView } from '@/api/myReport'
export default {
  name: 'reportDetail',
  components: {
    [Panel.name]: Panel,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      report: {}
    }
  },
  methods: {
    bindData (id) {
      ReportView({
        'reportId': id
      }).then(res => {
        // eslint-disable-next-line no-console
        console.log(res)
        this.report = res
      })
    }
  },
  created () {
    this.bindData(this.$route.query.id)
  }
}
</script>
<style lang="less" scoped>
.col {
  text-align: left;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
</style>